<template>
  <div class="tools-container">
    <h1>酿造工具</h1>
    <div class="tools-grid">
      <!-- Plato Calculator -->
      <router-link to="tools/plato-calculator" class="tool-card">
        <div class="tool-icon">🧪</div>
        <h3>Plato-Gravity 转换器</h3>
        <p>在 Plato 度数和比重之间进行转换</p>
      </router-link>

      <!-- ABV Calculator -->
      <router-link to="tools/abv-calculator" class="tool-card">
        <div class="tool-icon">🍺</div>
        <h3>ABV 计算器</h3>
        <p>计算酒精度数</p>
      </router-link>

      <!-- Color Converter -->
      <router-link to="tools/color-converter" class="tool-card">
        <div class="tool-icon">🎨</div>
        <h3>啤酒色度转换器</h3>
        <p>在 SRM、EBC 和 Lovibond 之间转换</p>
      </router-link>

      <!-- Hydrometer Correction -->
      <router-link to="tools/hydrometer-correction" class="tool-card">
        <div class="tool-icon">🌡️</div>
        <h3>比重计温度校正</h3>
        <p>根据温度校正比重计读数</p>
      </router-link>

      <!-- Yeast Calculator -->
      <router-link to="tools/yeast-calculator" class="tool-card">
        <div class="tool-icon">🧬</div>
        <h3>酵母计算器</h3>
        <p>计算所需酵母数量</p>
      </router-link>

      <!-- Calorie Calculator -->
      <router-link to="tools/calorie-calculator" class="tool-card">
        <div class="tool-icon">📊</div>
        <h3>卡路里计算器</h3>
        <p>计算啤酒的卡路里含量</p>
      </router-link>

      <!-- Fruit Dilution -->
      <router-link to="tools/fruit-dilution" class="tool-card">
        <div class="tool-icon">🍎</div>
        <h3>水果稀释计算器</h3>
        <p>计算水果添加对啤酒的稀释效果</p>
      </router-link>

      <!-- Speise Calculator -->
      <router-link to="tools/speise-calculator" class="tool-card">
        <div class="tool-icon">🔢</div>
        <h3>Speise 计算器</h3>
        <p>计算所需的 Speise 量</p>
      </router-link>

      <!-- Beer Name Generator -->
      <router-link to="tools/beer-name-generator" class="tool-card">
        <div class="tool-icon">✨</div>
        <h3>啤酒名称生成器</h3>
        <p>生成创意啤酒名称</p>
      </router-link>

      <!-- Beer Menu -->
      <router-link to="tools/cyberpunk-beer-menu" class="tool-card">
        <div class="tool-icon">🍺</div>
        <h3>赛博朋克啤酒菜单</h3>
        <p>创建独特的赛博朋克风格啤酒菜单</p>
      </router-link>
    </div>
  </div>
</template>

<script setup>
// No script needed for this view
</script>

<style scoped>
.tools-container {
  padding: 2rem;
}

.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.tool-card {
  background: var(--color-background-soft);
  border-radius: 8px;
  padding: 1.5rem;
  text-decoration: none;
  color: var(--color-text);
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.tool-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.tool-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

h1 {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: var(--color-heading);
}

h3 {
  font-size: 1.2rem;
  margin: 0.5rem 0;
  color: var(--color-heading);
}

p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--color-text-light);
}
</style> 